<style type="text/css">
    #scratch-stage {
        width: 320px;
        height: 240px;
        z-index: -1;
        position: absolute;
        /* transform: rotateX(180deg); */
        /* 
        transform: rotate(-90deg);
        left: -40px;
        top: 40px; 
        */
    }

    #scratch {
        overflow: hidden;
        margin: 0px;
        padding: 0px;
        width: 320px;
        height: 240px;
        transform: rotate(-90deg);
        position: absolute;
        left: -40px;
        top: 40px;
        /* cursor: none; */
    }

    #monitor-list {
        width: 320px;
        height: 240px;
        transform: rotate(-90deg);
        position: absolute;
        left: -40px;
        top: 40px;
        /* border: black 1px solid; */
        background-color: transparent;
        z-index: 42;
    }


    .monitor-container {
        position: absolute;
        background: var(--ui-primary);
        z-index: var(--z-index-monitor);
        border: 1px solid var(--ui-black-transparent);
        border-radius: calc(var(--space) / 2);
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-size: 0.75rem;
        transition: box-shadow 0.2s;
        pointer-events: all;
        overflow: hidden;
    }

    .default-monitor {
        display: flex;
        flex-direction: column;
        padding: 3px;
    }

    .monitor-label {
        font-weight: bold;
        text-align: center;
        margin: 0 0 0 2px;
        color: black;
    }

    .monitor-value {
        min-width: 40px;
        text-align: center;
        color: white;
        margin: 0 2px 0 0;
        /* top right bottom left */
        border-radius: calc(var(--space) / 2);
        padding: 0 2px;
        white-space: pre-wrap;
        transform: translateZ(0);
        /* Fixes flickering in Safari */
    }

    .monitor-container .builtin {
        background: rgb(255, 140, 26);
    }

    .monitor-container .addon {
        background: rgb(15, 189, 140);
    }

    .monitor-large-value {
        min-height: 1.4rem;
        min-width: 3rem;
        padding: 0.1rem 0.25rem;
        text-align: center;
        color: white;
        font-size: 1rem;
        white-space: pre-wrap;
        transform: translateZ(0);
        /* Fixes flickering in Safari */
    }

    .monitor {
        color: rgb(43, 156, 99);
        display: block;
        position: absolute;
        z-index: 38;
        background-color: black;
    }
</style>
<link rel="stylesheet" href="pages/explore/scratch-runner/scratch-runner.css">
<div id="monitor-list">
    <!-- <div class="monitor-container">
        <div class="monitor-label"></div>
        <div class="monitor-value"></div>
    </div> -->
</div>
<div id="scratch">
</div>